<template>
	<view :class="themeName">
		<!-- 提示 -->
		<u-notice-bar :list="noticeList"></u-notice-bar>
		<!-- 申请售后头部商品 -->
		<view class="m-t-20 bg-white flex p-24 p-l-30">
			<u-image style="border-radius: 20rpx;" :src="goodsData.goods_image" width="160rpx" height="160rpx"
				mode="aspectFill"></u-image>
			<view class="m-l-12">
				<view class="nr line-2 m-b-10">
					{{ goodsData.goods_name }}
				</view>
				<view class="xs muted skuline">
					{{ goodsData.spec_value_str }}
				</view>
			</view>
		</view>

		<!-- 售后方式选择 -->
		<view class="bg-white m-t-24 p-t-24 p-b-24" v-if="refund_method == 0">
			<view class="flex row-between p-r-20 p-b-20 p-l-20 bb" @click="getAfterSaleGoods(1)">
				<view class="">
					<view class="md normal">仅退款</view>
					<view class="xs muted m-t-10">未收到货，与卖家协商同意无需退货只需退款</view>
				</view>
				<u-icon name="arrow-right" size="22"></u-icon>
			</view>
			<view class="flex row-between p-r-20 m-t-24 p-l-20" @click="getAfterSaleGoods(2)">
				<view class="">
					<view class="md normal">退货退款</view>
					<view class="xs muted m-t-10">已收到货，需退还收到的实物</view>
				</view>
				<u-icon name="arrow-right" size="22"></u-icon>
			</view>
		</view>

		<view class="bg-white m-t-24" v-else>
			<view class="p-t-24 p-l-15">
				<view class="flex row-between bb p-b-24">
					<text class="nr normal">数量</text>
					<text class="p-r-20">{{ goodsData.goods_num }}</text>
				</view>
			</view>
			<view class="p-t-24 p-l-15">
				<view class="flex row-between bb p-b-24">
					<view class="nr normal">退款金额</view>
					<price class="m-r-20" :content="goodsData.total_pay_price" color="#FF2C3C" mainSize="28rpx"
						minorSize="26rpx"></price>
				</view>
			</view>
			<view class="p-t-24 p-l-15" @click="showPop = true">
				<view class="flex row-between bb p-b-24">
					<view class="nr normal">退款原因</view>
					<view class="m-r-20">
						<text class="p-r-15 muted nr">{{ reasonIndex }}</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>

			<view class="p-t-24 p-l-15">
				<view class="flex row-between col-top bb p-b-24">
					<view class="nr normal flex-none">退款说明</view>
					<view class="m-r-20 flex-1 m-l-20">
						<textarea class="bg-body" style="width: 100%" placeholder="请描述申请售后的具体原因，100字以内" v-model="remark"
							name="textarea"></textarea>
					</view>
				</view>
			</view>

			<view class="p-t-24 p-l-15 p-b-44">
				<view class="flex row-between p-b-24">
					<view class="nr normal">上传凭证</view>
					<view class="m-r-12 muted nr"> （选填，最多可上传3张） </view>
				</view>

				<uploader v-model="fileList" mutiple :deletable="true" preview-size="160rpx" :maxUpload="3"
					image-fit="aspectFill" />
			</view>
		</view>

		<view v-if="refund_method !== 0" class="post-btn flex row-center br60 lg white" :disabled="isLoading"
			@click="applyRefundFun">
			申请退款
		</view>

		<u-popup id="popup" v-model="showPop" border-radius="14" mode="bottom" :closeable="true">
			<view class="bg-white">
				<view class="pop-header flex row-center md normal"> 退款原因 </view>
				<scroll-view style="height: 800rpx" :scroll-y="true">
					<radio-group @change="radioChange" class="m-t-20">
						<label v-for="(item, index) in goodsData.reason" :key="index"
							class="reason-item flex row-between" @click="showPop = false">
							<view class="reason-desc nr">
								{{ item }}
							</view>
							<radio style="transform: scale(0.7)" color="#FF2C3C" :value="index + ''"></radio>
						</label>
					</radio-group>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		apiAfterSaleGoods,
		apiAfterSalePost
	} from "@/api/order.js";
	import {
		debounce
	} from "@/utils/tools";
	export default {
		data() {
			return {
				noticeList: [
					"订单所产生的运费，如已经发货的订单平台是不予退回的，请谨慎操作！",
				],
				id: 1,
				current: 0, //选择原因的索引
				refund_method: 0, //是否显示售后方式选择
				showPop: false, //显示退货退款原因弹窗
				reasonIndex: "请选择退款原因", //退货退款原因数据
				remark: "", //  备注退款原因
				fileList: [], //上传凭证
				goods_snap: '',
				goodsData: {
					goods_name: "",
					goods_image: "",
					spec_value_str: "",
				},
				isLoading: false,
			};
		},

		onLoad() {
			const options = this.$Route.query;
			this.id = options.id;
			this.getAfterSaleGoods();
		},

		methods: {
			// 获取商品自订单商品
			getAfterSaleGoods(methods = "") {
				if (methods != "") {
					this.refund_method = methods;
				}
				apiAfterSaleGoods({
					order_goods_id: this.id,
					refund_method: methods,
				}).then((res) => {
					console.log(res);
					this.goodsData = res;
				});
			},

			// 选择退款原因
			radioChange(event) {
				this.reasonIndex = this.goodsData.reason[event.detail.value];
			},

			// 提交售后
			applyRefundFun() {
				if (this.reasonIndex == "请选择退款原因") {
					return this.$toast({
						title: "请选择退款原因",
					});
				}
				this.isLoading = true;
				apiAfterSalePost({
						refund_remark: this.remark,
						refund_method: this.refund_method,
						refund_reason: this.reasonIndex,
						order_goods_id: this.id,
						voucher: this.fileList,
					})
					.then((res) => {
						// 埋点 售后
						// this.$uma.trackEvent('Um_Event_Afterservice', {
						// 	Um_Key_OrderID: ''+this.goodsData.order_goods_id,
						// 	Um_Key_ItemName: ''+this.goodsData.goods_name,
						// 	Um_Key_ItemID: ''+categoryName,
						// 	Um_Key_Reason: ''+this.userInfo.id,
						// 	Um_Key_UserID: ''+this.userInfo.id,
						// 	Um_Key_UserLevel: ''+this.userInfo.level
						// });
						uni.redirectTo({
							url: `/bundle/pages/after_sale/after_sale`,
						});
					})
					.finally(() => {
						this.isLoading = false;
					});
			},
		},
		async onShow() {
			this.applyRefundFun = debounce(this.applyRefundFun, 500, this);
		},
	};
</script>

<style lang="scss">
	.u-image__image {
		border-radius: 20rpx !important;
	}

	.bb {
		border-bottom: 1rpx solid #f2f2f2;
	}

	textarea {
		flex: 1;
		height: 172rpx;
		border-radius: 10rpx;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.pop-header {
		line-height: 42rpx;
		padding: 30rpx;
	}

	.reason-item {
		padding: 20rpx;

		.reason-desc {
			line-height: 46rpx;
		}
	}

	.post-btn {
		height: 84rpx;
		margin: 40rpx 24rpx 0 24rpx;
		@include background_color();
	}
</style>